.dx-loadindicator-content {
    height: 100%;
    width: 100%;
    .animation(content-rotation 1568ms linear infinite);
}

.dx-loadindicator-image {
    background-image: @ANDROID5_LOADINDICATOR_BACKGROUND;

    .dx-loadindicator-content {
        .animation(none);
    }
}

.dx-loadindicator-icon {
    position: absolute;
    height: 100%;
    width: 100%;
    .animation(icon-rotation 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both);
}

.dx-loadindicator-segment {
    height: 100%;
    width: 100%;
    position: absolute;
}

.dx-loadindicator-segment-inner {
    position: relative;
    height: 100%;
    border-color: @ANDROID5_LOAD_INDICATOR_SEGMENT_BACKGROUND_COLOR;
    border-width: 0.12em;
    border-style: solid;
    border-bottom-color: transparent;
    .animation(none);
    .border-radius(50%);
}

.dx-loadindicator-segment2, .dx-loadindicator-segment0 {
    display: inline-block;
    position: relative;
    width: 50%;
    height: 100%;
    overflow: hidden;

    .dx-loadindicator-segment-inner {
        width: 200%;
    }
}

.dx-loadindicator-segment2 {
    .dx-loadindicator-segment-inner {
        border-right-color: transparent;
        .transform(rotate(-129deg));
        .animation(left-segment-rotation 1333ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both);
    }
}

.dx-loadindicator-segment0 {
    .dx-loadindicator-segment-inner {
        left: -100%;
        border-left-color: transparent;
        .transform(rotate(129deg));
        .animation(right-segment-rotation 1333ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both);
    }
}

.dx-loadindicator-segment1 {
    position: absolute;
    top: 0;
    left: 45%;
    width: 10%;
    height: 100%;
    overflow: hidden;
    .box-sizing(border-box);

    .dx-loadindicator-segment-inner {
        width: 1000%;
        left: -450%;
    }
}

@-webkit-keyframes content-rotation {
  to    { -webkit-transform: rotate(360deg); }
}

@-moz-keyframes content-rotation {
  to    { -moz-transform: rotate(360deg); }
}

@-ms-keyframes content-rotation {
  to    { -mos-transform: rotate(360deg); }
}

@keyframes content-rotation {
  to    { transform: rotate(360deg); }
}

@-webkit-keyframes icon-rotation {
  12.5% { -webkit-transform: rotate(135deg);  }
  25%   { -webkit-transform: rotate(270deg);  }
  37.5% { -webkit-transform: rotate(405deg);  }
  50%   { -webkit-transform: rotate(540deg);  }
  62.5% { -webkit-transform: rotate(675deg);  }
  75%   { -webkit-transform: rotate(810deg);  }
  87.5% { -webkit-transform: rotate(945deg);  }
  to    { -webkit-transform: rotate(1080deg); }
}

@-moz-keyframes icon-rotation {
  12.5% { -moz-transform: rotate(135deg);  }
  25%   { -moz-transform: rotate(270deg);  }
  37.5% { -moz-transform: rotate(405deg);  }
  50%   { -moz-transform: rotate(540deg);  }
  62.5% { -moz-transform: rotate(675deg);  }
  75%   { -moz-transform: rotate(810deg);  }
  87.5% { -moz-transform: rotate(945deg);  }
  to    { -moz-transform: rotate(1080deg); }
}

@-ms-keyframes icon-rotation {
  12.5% { -ms-transform: rotate(135deg);  }
  25%   { -ms-transform: rotate(270deg);  }
  37.5% { -ms-transform: rotate(405deg);  }
  50%   { -ms-transform: rotate(540deg);  }
  62.5% { -ms-transform: rotate(675deg);  }
  75%   { -ms-transform: rotate(810deg);  }
  87.5% { -ms-transform: rotate(945deg);  }
  to    { -ms-transform: rotate(1080deg); }
}

@keyframes icon-rotation {
  12.5% { transform: rotate(135deg);  }
  25%   { transform: rotate(270deg);  }
  37.5% { transform: rotate(405deg);  }
  50%   { transform: rotate(540deg);  }
  62.5% { transform: rotate(675deg);  }
  75%   { transform: rotate(810deg);  }
  87.5% { transform: rotate(945deg);  }
  to    { transform: rotate(1080deg); }
}

@-webkit-keyframes left-segment-rotation {
  from  { -webkit-transform: rotate(130deg); }
  50%   { -webkit-transform: rotate(-5deg); }
  to    { -webkit-transform: rotate(130deg); }
}

@-moz-keyframes left-segment-rotation {
  from  { -moz-transform: rotate(130deg); }
  50%   { -moz-transform: rotate(-5deg); }
  to    { -moz-transform: rotate(130deg); }
}

@-ms-keyframes left-segment-rotation {
  from  { -ms-transform: rotate(130deg); }
  50%   { -ms-transform: rotate(-5deg); }
  to    { -ms-transform: rotate(130deg); }
}

@keyframes left-segment-rotation {
  from  { transform: rotate(130deg); }
  50%   { transform: rotate(-5deg); }
  to    { transform: rotate(130deg); }
}

@-webkit-keyframes right-segment-rotation {
  from  { -webkit-transform: rotate(-130deg); }
  50%   { -webkit-transform: rotate(5deg); }
  to    { -webkit-transform: rotate(-130deg); }
}

@-moz-keyframes right-segment-rotation {
  from  { -moz-transform: rotate(-130deg); }
  50%   { -moz-transform: rotate(5deg); }
  to    { -moz-transform: rotate(-130deg); }
}

@-ms-keyframes right-segment-rotation {
  from  { -ms-transform: rotate(-130deg); }
  50%   { -ms-transform: rotate(5deg); }
  to    { -ms-transform: rotate(-130deg); }
}

@keyframes right-segment-rotation {
  from  { transform: rotate(-130deg); }
  50%   { transform: rotate(5deg); }
  to    { transform: rotate(-130deg); }
}
